<template>
  <view class="province-modal" v-if="visible" @click="closeModal">
    <view class="modal-content" @click.stop>
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <text class="modal-title">选择省份：已选择{{ selectedProvinces.length }}个</text>
        <view class="close-btn" @click="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 省份选项列表 -->
      <view class="province-list">
        <view class="province-item" @click="selectProvince('all')">
          <view class="radio-btn" :class="{ checked: selectedProvinces.includes('all') }">
            <text class="check-icon" v-if="selectedProvinces.includes('all')">✓</text>
          </view>
          <text class="province-name">全部选择</text>
        </view>
        
        <!-- 省份网格 -->
        <view class="province-grid">
          <view 
            class="province-grid-item" 
            v-for="province in provinces" 
            :key="province.code"
            @click="selectProvince(province.code)"
            :class="{ selected: selectedProvinces.includes(province.code) }"
          >
            <text class="province-text">{{ province.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 完成按钮 -->
      <view class="complete-btn" @click="confirmSelection">
        <text class="btn-text">完成</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProvinceSelector',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedProvinces: [],
      provinces: [
        // 直辖市
        { code: 'beijing', name: '北京' },
        { code: 'tianjin', name: '天津' },
        { code: 'shanghai', name: '上海' },
        { code: 'chongqing', name: '重庆' },
        // 省份
        { code: 'hebei', name: '河北' },
        { code: 'shanxi', name: '山西' },
        { code: 'liaoning', name: '辽宁' },
        { code: 'jilin', name: '吉林' },
        { code: 'heilongjiang', name: '黑龙江' },
        { code: 'jiangsu', name: '江苏' },
        { code: 'zhejiang', name: '浙江' },
        { code: 'anhui', name: '安徽' },
        { code: 'fujian', name: '福建' },
        { code: 'jiangxi', name: '江西' },
        { code: 'shandong', name: '山东' },
        { code: 'henan', name: '河南' },
        { code: 'hubei', name: '湖北' },
        { code: 'hunan', name: '湖南' },
        { code: 'guangdong', name: '广东' },
        { code: 'hainan', name: '海南' },
        { code: 'sichuan', name: '四川' },
        { code: 'guizhou', name: '贵州' },
        { code: 'yunnan', name: '云南' },
        { code: 'shaanxi', name: '陕西' },
        { code: 'gansu', name: '甘肃' },
        { code: 'qinghai', name: '青海' },
        { code: 'taiwan', name: '台湾' },
        // 自治区
        { code: 'neimenggu', name: '内蒙古' },
        { code: 'guangxi', name: '广西' },
        { code: 'tibet', name: '西藏' },
        { code: 'ningxia', name: '宁夏' },
        { code: 'xinjiang', name: '新疆' },
        // 特别行政区
        { code: 'hongkong', name: '香港' },
        { code: 'macao', name: '澳门' }
      ]
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.selectedProvinces = [...this.defaultSelected]
      }
    }
  },
  methods: {
    selectProvince(provinceCode) {
      if (provinceCode === 'all') {
        // 全选/取消全选逻辑
        if (this.selectedProvinces.includes('all')) {
          this.selectedProvinces = []
        } else {
          this.selectedProvinces = ['all', ...this.provinces.map(p => p.code)]
        }
      } else {
        // 单个省份选择逻辑
        const index = this.selectedProvinces.indexOf(provinceCode)
        if (index > -1) {
          this.selectedProvinces.splice(index, 1)
          // 如果取消选择某个省份，同时取消全选
          const allIndex = this.selectedProvinces.indexOf('all')
          if (allIndex > -1) {
            this.selectedProvinces.splice(allIndex, 1)
          }
        } else {
          this.selectedProvinces.push(provinceCode)
          // 检查是否所有省份都被选中，如果是则自动选中全选
          const allProvinceCodes = this.provinces.map(p => p.code)
          if (allProvinceCodes.every(code => this.selectedProvinces.includes(code))) {
            if (!this.selectedProvinces.includes('all')) {
              this.selectedProvinces.push('all')
            }
          }
        }
      }
    },
    closeModal() {
      this.$emit('close')
    },
    confirmSelection() {
      // 过滤掉'all'选项，只返回实际选中的省份代码
      const filteredSelection = this.selectedProvinces.filter(item => item !== 'all')
      this.$emit('confirm', filteredSelection)
      this.closeModal()
    }
  }
}
</script>

<style lang="scss" scoped>
.province-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: -5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  .modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  .close-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .close-icon {
      font-size: 24px;
      color: #999;
      line-height: 1;
    }
  }
}

.province-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.province-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  
  .radio-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #f5f5f5;
    
    &.checked {
      border-color: #ff4757;
      background-color: #ff4757;
      
      .check-icon {
        color: #fff;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  
  .province-name {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
}

.province-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.province-grid-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &.selected {
    background: #fff2f0;
    border-color: #ff4757;
    
    .province-text {
      color: #ff4757;
      font-weight: 500;
    }
  }
  
  &:hover {
    background: #f0f0f0;
  }
  
  .province-text {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
}

.complete-btn {
  margin: 16px 20px 20px;
  background-color: #ff4757;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  .btn-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>